<template>
	<view class="container">
		<!-- <st-navigation title="促销活动" :subtitle="salesPromotion.length && `共${salesPromotion.length}个`"></st-navigation> -->
		<u-gap height="8" bgColor="#F4F4F4"></u-gap>
		<scroll-view scroll-y="true" :style="'height:'+ H" @scrolltolower="scrolltolowerBtn">
			<view class="sales-promotion">
				<view class="sales-promotion-item" v-for="(item, index) of salesPromotion" :key="index"
					@click="handleToYsmSalesPromotionDetail(item)" v-if="item.timeStr!=='活动已结束'">
					<!-- v-if="item.timeStr!=='活动已结束'" -->
					<view class="sales-promotion-item-name" style="font-size: 24rpx;padding-left: 22rpx;">
						{{ item.title }}</view>
					<image :src="item.img" mode="aspectFill"></image>
					<view class="sales-promotion-item-info">
						<!-- <view class="sales-promotion-item-name">{{ item.title }}</view> -->
						<view class="sales-promotion-item-desc">
							<text style="padding-right: 22rpx;">活动倒计时：</text>
							<text style="font-size: 24rpx;color:#333333 ;">{{ item.timeStr }}</text>
						</view>
					</view>
				</view>
			</view>
			<StEmpty v-if="isSalesProNull">暂无任何活动</StEmpty>
		</scroll-view>
	</view>
</template>

<script>
	import StEmpty from '@/components/st-empty/st-empty.vue';
	export default {
		components: {
			StEmpty
		},
		props: {
			mainHeight: {
				type: Number
			}
		},
		watch: {
			mainHeight(newVal) {
				// this.H=newVal+ 'px'
				let systemInfo = uni.getSystemInfoSync();   
				this.H = systemInfo.screenHeight - (newVal + 30 + 8) + 'px'
			}
		},
		data() {
			return {
				H: "",
				salesPromotion: [
					/* {
						name: '9月开工季',
						desc: '0天  03:27:59',
						img: '../../static/images/ysmSalesPromotion/sales-promotion-1.png'
					}, */
				],
				isSalesProNull: false,
				scrollStype: false, //滚动状态
				Opacity: 0,
				reload: false, //判断是否上拉
				page: 1,
				last_page: 0,
				status: 'loading',
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				},
				timer: null,
			};
		},
		mounted() {
			this.loadData();
		},
		// 监听上拉
		onPullDownRefresh() {
			this.page = 1;
			this.reload = true;
			this.loadData();
		},
		// 下拉刷新
		onReachBottom() {
			if (this.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.page = this.page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		methods: {
			scrolltolowerBtn() {
				if (this.page >= this.last_page) {
					this.status = 'noMore';
				} else {
					this.reload = false;
					this.contentText.contentdown = '上拉显示更多';
					this.page = this.page + 1; //页码+1
					this.status = 'loading';
					this.loadData();
				}
			},
			loadData() {
				let params = {
					// page: this.page,
				}
				this.$api.get({
					url: '/wanlshop/user/getActivitylist',
					data: params,
					success: res => {
						console.log(res);
						uni.stopPullDownRefresh();
						this.status = 'more';
						this.salesPromotion = this.reload ? res.data : this.salesPromotion.concat(res
							.data); //数据 追加
						// this.salesPromotion =[...this.salesPromotion ,...this.salesPromotion ,...this.salesPromotion ]	
						this.renderData();
						this.timer = setInterval(() => {
							this.renderData();
						}, 1000);

						this.page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
					},
				});
			},

			renderData() {
				this.salesPromotion.forEach((item, index) => {

					this.isSalesProNull = this.salesPromotion.every(i => {
						return i.timeStr === '活动已结束'
					})
					// console.log('this.isSalesProNull', this.isSalesProNull)
					let countDown = this.countDown(item.endtime);
					if (countDown.day <= '00' && countDown.hour <= '00' && countDown.minute <= '00' &&
						countDown
						.second <= '00') {
						item.timeStr = '活动已结束';
						return;
					}
					let timeStr =
						`${countDown.day}天 ${countDown.hour}:${countDown.minute}:${countDown.second}`;
					this.$set(this.salesPromotion[index], 'timeStr', timeStr);
				});
			},

			// 根据时间戳倒计时
			countDown(time) {
				let now = new Date().getTime();
				let diff = time * 1000 - now;

				let day = Math.floor(diff / (24 * 60 * 60 * 1000));
				let hour = Math.floor((diff % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
				let minute = Math.floor((diff % (60 * 60 * 1000)) / (60 * 1000));
				let second = Math.floor((diff % (60 * 1000)) / 1000);

				return {
					day: day < 10 ? '0' + day : day,
					hour: hour < 10 ? '0' + hour : hour,
					minute: minute < 10 ? '0' + minute : minute,
					second: second < 10 ? '0' + second : second,
				}
			},


			handleToYsmSalesPromotionDetail(item) {
				let activityDetail = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pagesYSM/ysmSalesPromotion/ysmSalesPromotionDetail?activityDetail=${activityDetail}`
				});
			}
		},
		// 销毁
		onUnload() {
			clearInterval(this.timer);
		}
	}
</script>

<style lang="less">
	page {
		background-color: #FFFFFF;
	}

	.sales-promotion {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 24rpx;
		padding: 24rpx 32rpx;

		.sales-promotion-item {
			width: 100%;
			margin: 0 auto;
			min-width: 0rpx;
			background: #FFFFFF;
			border: 0.5px solid #E6E6E6;

			image {
				height: 192rpx;
				width: 100%;
			}

			.sales-promotion-item-name {
				font-weight: 600;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #000000;
				padding: 18rpx;
				width: 340rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}

			.sales-promotion-item-info {
				padding: 16rpx 14rpx;

				.sales-promotion-item-name {
					margin-bottom: 10rpx;
					font-weight: 600;
					font-size: 24rpx;
					line-height: 34rpx;
					color: #000000;
				}

				.sales-promotion-item-desc {
					text {
						font-weight: 400;
						color: #999999;
					}

					font-size: 22rpx;
					color: #000000;
				}
			}
		}

	}
</style>